<template>
  <div>
    <el-form ref="form" :model="form" label-width="80px" :inline="true" style="position: fixed">
      <el-col class="location" style="margin-left: 370px;margin-top: 30px">
        <el-form-item label="加分原因">
          <el-input v-model="form.projectName" class="name"></el-input>
        </el-form-item>
      </el-col>
      <el-col class="location" style="margin-left: 370px;margin-top: 30px">
        <el-form-item label="加分分数">
          <el-input v-model="form.score" class="name"></el-input>
        </el-form-item>
      </el-col>
      <el-col class="location" style="margin-left: 370px;margin-top: 30px">
        <el-form-item label="加分类型">
          <el-select v-model="form.projectType" placeholder="请选择加分类型" style="width: 300px">
            <el-option label="德育分" value="德育分"></el-option>
            <el-option label="文体分--体育竞赛" value="文体分"></el-option>
            <el-option label="文体分--艺术比赛" value="文体分"></el-option>
            <el-option label="技能分--证书" value="技能分"></el-option>
            <el-option label="技能分--竞赛" value="技能分"></el-option>
            <el-option label="技能分--论文" value="技能分"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <span style="margin-left: 350px;">请上传证明材料图片（只能上传一张,上传格式为jpg,大小<2M）</span>
      <el-col class="location" style="margin-left: 490px;margin-top: 20px">
        <el-form-item>
          <el-upload
            ref="upload"
            name="file"
            :data="form"
            class="avatar-uploader"
            :append-to-body="true"
            action="/api/uploading/otherBonusUpload"
            list-type="picture-card"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove"
            :limit="1"
            :file-list="fileList"
            :auto-upload="true"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible"
                     :append-to-body="true">
            <img  v-if="imageUrl" width="100%" :src="imageUrl" alt="">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-dialog>
        </el-form-item>
      </el-col>
      <el-col class="location" style="margin-left: 500px;margin-top: 30px">
        <el-form-item>
          <el-button type="primary" @click="onSubmit('upload')" size="20px " style="width: 130px"> 提 交 </el-button>
        </el-form-item>
      </el-col>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "ElseUploading",
  data() {
    return {
      // 表单数据
      form: {
        // 图片路径
        imageUrl: '',
      },

      imageUrl:'',

      fileList:[],

      dialogVisible: false
    };
  },

  methods: {
    onSubmit() {
      // console.log(this.imageUrl,this.form.score,this.form.projectType,this.form.projectName)
      // axios.post('/api/uploading/otherBonusUpload?'+"&&projectName="+this.form.projectName+"&&projectType="+this.form.projectType+"&&score="+this.form.score).then((res)=>{
      //   if (res.data.resultCode == "200"){
      //     this.$message.success(res.data.message)
      //   }else {
      //     this.$message.error(res.data.message)
      //   }
      // })
    },


    //图片移除和放大
    handleRemove(file, fileList) {
      console.log("图片移除成功");
    },
    handlePictureCardPreview(file) {
      this.imageUrl = file.url;
      this.dialogVisible = true;
    },

    handleAvatarSuccess(res, file) {
      this.imageUrl=file.url
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    }
  }
}

</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.name {
  width: 300px;
  text-align: center;
}
</style>
